<template>
  <div>
    <el-dialog title="" :visible.sync="centerDialogVisible" width="400px" center :close-on-click-modal="false" :show-close="false">
      <div v-if="!loading">
        <div class="text-center txt">第一次使用请先同步公众号粉丝</div>
        <div class="text-center btn"><el-button type="primary" :disabled="loading" @click="getWechatMassSyncTask()">同步公众号粉丝</el-button></div>
      </div>
      <div v-if="loading">
        <el-progress :percentage="progressVal" />
        <div class="pro-txt pro-txt-line">正在同步公众号粉丝</div>
        <div class="pro-txt pro-txt-line2">请耐心等待</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { wechatMassSyncTask } from '@/api/massSMS'
export default {
  props: ['centerDialogVisible', 'sync_num', 'showSendStatus'],
  data() {
    return {
      loading: false,
      progressVal: 0
    }
  },
  methods: {
    getData() {
      this.loading = true
      this.$emit('updateData', true)
    },
    getWechatMassSyncTask() {
      this.loading = true
      const requestList = []
      const progressValPre = 100 / this.sync_num
      this.progressVal = progressValPre
      for (let i = 0; i < this.sync_num; i++) {
        requestList.push(wechatMassSyncTask)
      }
      let j = 0 // 记录发送的请求个数
      const send = async () => {
        if (j >= requestList.length) {
          this.$emit('updateCenterDialogVisible')
          this.centerDialogVisible = false
          this.loading = false
          this.$message.success('同步成功！')
          // 发送完毕
          return
        }
        await requestList[j]()
        if (this.progressVal <= 100 - progressValPre) {
          this.progressVal += progressValPre
        }
        j++
        send()
      }
      send() // 发送请求
    }
  }
}
</script>

<style lang="scss" scoped>
.txt {
  margin-bottom: 30px;
}
.text-center {
  text-align: center;
  &.btn {
    margin-bottom: 25px;
  }
}
.num-progress {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.pro-txt {
  text-align: center;
  font-size: 14px;
  color: #333;
  &.pro-txt-line {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  &.pro-txt-line2 {
    margin-bottom: 25px;
  }
}
</style>
